<template>
  <div >
    <!--   开头 -->
    <div style="margin-top: 3%;margin-left: 5%;margin-right: 5%">
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft()">
        <template #right>
          <van-icon name="link-o" size="20"/>
        </template>
      </van-nav-bar>
    </div>
    <!--     图片 -->
    <div v-for="s in  courses" :key="s">
      <div   >
        <img class="jh2-tp1" :src="s.imgurl">
      </div>

      <!-- 第3模块 -->
      <div>
        <div>
          <!--         第2模块 -->
          <div class="jh2-bk"  >
            <div class="jh-title">
              <div class="title">
              <label >{{s. title}}</label>
              </div>
              <div class="info">
            <label >{{s. info}}</label>
              </div>
            </div>

            <!--   最外边框 -->
            <div >
              <!--                边框2  -->
              <div class="van1"  style="background-color:lavender; float:right; margin-right:10px; border-radius:18px 18px 18px 18px;  width:40%; height:150px;" >

                <div style="margin-left:20px"><h3 style="">计划:{{s.infoone}}</h3></div>
                <span style="font-size:5px; "><h3 style="margin-left:13px">计划时间:{{s.time}}天</h3></span>

              </div>
              <div class="van1"  style="background-color:lavender; float:right; margin-right:10px; border-radius:18px 18px 18px 18px;  width:40%; height:150px;" >

                <div style="margin-left:20px"><h3 style="">计划:{{s.infotwo}}</h3></div>
                <span style="font-size:5px; "><h3 style="margin-left:13px">计划时间:{{s.time}}天</h3></span>

              </div>
            </div>
          </div>
        </div>



      </div>
      <!--   第4模块 -->
    </div>
  </div>
  <div  v-for="s in  courses" :key="s"><van-button class="bm" color="linear-gradient(to right, #ff6034, #ee0a24)" @click="add(s.id)">火热报名
  </van-button></div>
</template>

<script>
export default {
  name: "PlanPageView",
  data() {
    return {

      courses:[
        {
          id:"",
          imgurl: "",
          info:"",
          title:"",
          name:"",
          time:"",
          infoone:"",
          infotwo:""
        }
      ],




    }
  },
  mounted() {
    this.axios.get("/api/paln/id.do?id="+this.$route.query.id).then(r=>{
      if(r.data.code==200) {


        this.courses = r.data.data;
      }
    })
  },

  methods: {
    onClickLeft() {
      this.$router.push("/Plan")
    },
    add(id) {

      //请求接口 实现活动报名 useractivity
      this.axios.get("http://localhost:8082/api/plan/add.do?cid=" + id).then(r => {

        if (r.data.code == 200) {
          this.$toast("恭喜你，报名活动成功！");
        } else {
          this.$toast(r.data.msg);
        }
      })
    },

  }

}

</script>

<style scoped>
.title{
  width:50%;
  font-size:25px;
  font-weight:bold;
  float:left;
}
.info{
  margin:20px;
  width:80%;
  font-size:18px;
  font-weight:bold;
  float:left;
}
.jh-title{
  height:140px;
  background-color:yellowgreen;
  border-radius:20px;
}
.bm{
  margin-top:10px;
  margin-left:20px;
}
.jh2-tp1{
  width: 100%;
  height: 40%;
}

.jh2-bk{
  padding-top:5px;
  border-radius:18px 18px 18px 18px;
}
.van1{
  padding-right:21px;
  margin-top:20px

}
</style>